import * as React from 'react';
import { Form, Input, Modal, Select, message } from 'antd';
import request from '@/http';
import './tEdit.less';
import qs from 'qs';
// import qs from 'qs';

const { Option } = Select;

interface UserEditObject {
  isModalVisible: boolean;
  id?: number;
  name?: string;
  userNo?: number;
  idNo?: string;
  sex?: any;
  mobileNo?: number;
  position?: any;
  status?: string;
}

const TEdit = (props: { editObject: UserEditObject; onClose: any }) => {
  const { editObject, onClose } = props;
  const [isModalVisible, setIsModalVisible] = React.useState(false);
  const [formObject] = Form.useForm();

  const modelOnOk = async () => {
    /* const newData = await formObject.setFieldsValue({
       name: editObject.name,
       userNo: editObject.userNo,
       idNo: editObject.idNo,
       sex: (editObject.sex === '男' ? 1 : 0),
       mobileNo: editObject.mobileNo,
       position: (editObject.position === '实验员' ? 1 : editObject.position === '讲师' ? 2 : editObject.position === '教授' ? 3 :
         editObject.position === '副教授' ? 4 : editObject.position === '主任' ? 5 : ''),
       status: editObject.status,

     })*/

    const data = await formObject.validateFields();

    console.log('获取的表单', data);
    console.log(editObject.id);

    //序列化
    var dataStr = '';
    var ds = {
      ...data,
      id: editObject.id + '',
    };

    if (flag) {
      //编辑教师信息

      const result: any = await request.post(
        '/api/admin/teacherInfoManagement/editTeacher',
        qs.stringify(ds),
      );
      console.log(result);
      if (result.code === 200) {
        message.success('修改成功');
        if (onClose) {
          onClose();
        }
        setIsModalVisible(false);
      } else {
        message.error('该工号已存在，修改教师信息失败');
      }
    } else {
      //新增老师
      console.log('新增教师的表单：', dataStr);
      const result: any = await request.post(
        '/api/admin/teacherInfoManagement/insertTeacher',
        qs.stringify(ds),
      );
      console.log(result);
      if (result.code === 200) {
        setTimeout(() => {
          message.success('添加成功');
        }, 500);

        if (onClose) {
          //点击取消  关闭窗口
          onClose();
        }

        setIsModalVisible(false); // 关闭窗口
      } else {
        setTimeout(() => {
          message.error('该工号已存在，新增教师失败');
        }, 0);

        // setIsModalVisible(false);
      }
    }
  };

  const modelOnCancel = () => {
    setIsModalVisible(false);
  };

  React.useEffect(() => {
    setIsModalVisible(editObject.isModalVisible);
    if (editObject.id !== null) {
      formObject.setFieldsValue({
        name: editObject.name,
        userNo: editObject.userNo,
        idNo: editObject.idNo,
        sex: editObject.sex,
        mobileNo: editObject.mobileNo,
        position: editObject.position,
        status: editObject.status,
      });
    }
  }, [editObject]);

  const flag = editObject.id !== null && editObject.id !== undefined;

  return (
    <>
      <Modal
        width={1200}
        className="modal"
        title={flag ? '编辑教师信息' : '新增'}
        visible={isModalVisible}
        onCancel={modelOnCancel}
        onOk={modelOnOk}
        maskClosable={false}
        destroyOnClose
        okText="确认"
        cancelText="取消"
      >
        <Form
          className="form"
          name="editForm"
          form={formObject}
          preserve={false}
        >
          <Form.Item label="教师姓名" name="name" style={{ marginRight: 100 }}>
            <Input placeholder="请输入" />
          </Form.Item>

          <Form.Item label="工号" name="userNo" style={{ marginBottom: 34 }}>
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="身份证号"
            name="idNo"
            style={{ marginBottom: 34 }}
            rules={[
              {
                whitespace: true,
                message: '身份证号码不能为空!',
              },
              { min: 18, max: 18, message: '身份证号码长度必须是18位!' },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="性别" name="sex" className="tPosition">
            <Select>
              <Option value="" defaultValue="1">
                请选择...
              </Option>
              <Option value="男">男</Option>
              <Option value="女">女</Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="手  机  号"
            name="mobileNo"
            rules={[
              {
                pattern: /^1[3456789]\d{9}$/,
                message: '请输入正确的电话号码!',
              },
            ]}
          >
            <Input style={{ marginLeft: 3 }} placeholder="请输入" />
          </Form.Item>
          <Form.Item label="职位" name="position" className="tPosition">
            <Select style={{ marginLeft: 3 }}>
              <Option value="">请选择...</Option>
              <Option value="实验员">实验员</Option>
              <Option value="讲师">讲师</Option>
              <Option value="教授">教授</Option>
              <Option value="副教授">副教授</Option>
              <Option value="主任">主任</Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export { TEdit, UserEditObject };
